<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">主叫号码</label>
      <div class="layui-input-block">
        <input type="zjhm" name="zjhm" placeholder="请输入主叫号码" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item layui-hide">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
          <input type="checkbox" name="start" lay-skin="switch" lay-filter="switch" lay-text="使用中|未使用" checked>
      </div>
    </div>
        <div class="layui-form-item layui-hide">
      <label class="layui-form-label">归属账号</label>
      <div class="layui-input-block">
        <input type="userid" name="userid" placeholder="请输入归属账号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item layui-hide">
      <label class="layui-form-label">归属公司</label>
      <div class="layui-input-block">
        <input type="company" name="company" placeholder="请输入归属公司" autocomplete="off" class="layui-input">
      </div>
    </div>

  <div class="layui-form-item layui-hide">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit" id="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="tZjhmgl:list">
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="key" class="layui-input"  autocomplete="off" placeholder="请输入号码">
      </div>
        <div class="layui-input-inline">
        <input type="text" id="user" class="layui-input"  autocomplete="off" placeholder="请输入坐席">
      </div>
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
<!--               <button class="layui-btn"   id="export">导出全部</button>-->
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add" >添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tZjhmgl:delete">删除</button>
  </div>
</script>
<script type="text/html" id="toolbarElse">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addElse" >添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tZjhmgl:delete">删除</button>
    </div>
</script>

<script type="text/html" id="tool">
  {{#  if(d.start == "2"){ }}
  <a class="layui-btn layui-btn-xs" lay-event="setCaller">设置主叫</a>
  {{#  } }}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="tZjhmgl:delete">删除</a>
</script>
<script type="text/html" id="toolElse">
    {{#  if(d.start == "2"){ }}
    <a class="layui-btn layui-btn-xs" lay-event="setCaller">设置主叫</a>
    {{#  } }}
<!--    {{#  if(d.start == "1"){ }}-->
<!--    <a class="layui-btn layui-btn-xs" lay-event="check">验证</a>-->
<!--    {{#  } }}-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="tZjhmgl:delete">删除</a>
</script>
<div id="ediyzm" class="demo-transfer" style="display: none">
    <input type="text" id="yzm" class="layui-input"  autocomplete="off" placeholder="请输入验证码">
</div>
</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  userInfo = CoreUtil.getData("userInfo");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;

  var tableCols = [
      {field: 'zjhm', title: '主叫号码', sort: true,align: 'center'},
      {field: 'start', title: '状态', sort: true,align:"center",  templet: function (item) {
              if (item.start === "1") {
                  return '  <input type="checkbox" lay-skin="switch" lay-text="使用中|未使用" checked disabled>';
              }
              if (item.start === "2") {
                  return '  <input type="checkbox" lay-skin="switch" lay-text="使用中|未使用" disabled>';
              }
          }},
      {field: 'userid', title: '归属账号', sort: true,align: 'center'},
      {field: 'company', title: '归属公司', sort: true,align: 'center'},
      {field: 'addtime', title: '添加时间', sort: true,align: 'center'},
      {width: 210, toolbar: "#tool", title: '操作'}
  ];
  var tableColsElse = [
      {field: 'zjhm', title: '主叫号码', sort: true,align: 'center'},
      {field: 'start', title: '状态', sort: true,align:"center",  templet: function (item) {
              if (item.start === "1") {
                  return '  <input type="checkbox" lay-skin="switch" lay-text="使用中|未使用" checked disabled>';
              }
              if (item.start === "2") {
                  return '  <input type="checkbox" lay-skin="switch" lay-text="使用中|未使用" disabled>';
              }
          }},
      {field: 'userid', title: '归属账号', sort: true,align: 'center'},
      {field: 'addtime', title: '添加时间', sort: true,align: 'center'},
      {width: 210, toolbar: "#toolElse", title: '操作'}
  ];
  var vtoolbar = '#toolbarElse';
  layui.use(['table', 'layer', 'laydate'], function () {
      var info  = function () {
          CoreUtil.sendGet("/sys/home/", null, function (res) {
              userInfo = res.data.userInfo;
              userRoles = res.data.sysRole;
              userDepts = res.data.dept;
              userSysUsers = res.data.users;
              //加载表格
              tableIns();
          });
      };
      info();
      //加载表格
      var tableIns = function () {
          //根据部门区分表格
          var deptName = userInfo.sysRoleName;
          var vcols = tableColsElse;
          if ((deptName.indexOf("管理员")>-1)) {
              vcols = tableCols;
              vtoolbar = '#toolbar';
          }else if ((deptName.indexOf("员工")>-1)) {
              $("#searchParam").hide();
          }else {
              $("#searchParam").hide();
          }
          //加载table
          tableIns1 = table.render({
              elem: '#showTable'
              , contentType: 'application/json'
              , headers: {"authorization": token}
              , page: true //开启分页
              , url: '/tZjhmgl/listByPage' //数据接口
              , method: 'POST'
              , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                  return {
                      "code": res.code, //解析接口状态
                      "msg": res.msg, //解析提示文本
                      "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                      "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                  }
              }
              , cols: [ vcols]
              , toolbar: vtoolbar
          });
      };

    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':

          // $(".table_div").hide();
          // $(".operation").show();
          // $(".title").html("新增");
            layer.open({
                type: 1,
                skin: 'layui-layer-molv',
                title: "新增",
                area: ['70%', '80%'],
                shade: 0,
                shadeClose: false,
                content: jQuery(".operation"),
                btn: ['立即提交', '关闭'],
                btnAlign: 'c',
                shadeClose: true,
                shade: 0.8,
                yes: function(index, layero){
                    var submit = layero.find('.operation').contents().find("#submit");// #subBtn为页面层提交按钮ID
                    submit.click();// 触发提交监听
                    layer.close(index);
                }
            });

          $(".operation input[name=id]").val("");
          $(".operation input[name=zjhm]").val("");
        $(".operation_user input[name=start]").attr('checked', 'checked');
        $(".operation_user input[name=start]").attr('type', 'hidden').val(1);
          $(".operation input[name=userid]").val("");
          $(".operation input[name=company]").val("");
          $(".operation input[name=addtime]").val("");
          break;
      case 'addElse':
          layer.open({
              type: 1,
              skin: 'layui-layer-molv',
              title: "新增",
              area: ['50%', '40%'],
              shade: 0,
              shadeClose: false,
              content: jQuery(".operation"),
              btn: ['立即提交', '关闭'],
              btnAlign: 'c',
              shadeClose: true,
              shade: 0.8,
              yes: function(index, layero){
                  var submit = layero.find('.operation').contents().find("#submit");// #subBtn为页面层提交按钮ID
                  submit.click();// 触发提交监听
                  layer.close(index);
              }
          });
          $(".operation input[name=id]").val("");
          $(".operation input[name=zjhm]").val("");
          $(".operation_user input[name=start]").attr('checked', 'checked');
          $(".operation_user input[name=start]").attr('type', 'hidden').val(1);
          $(".operation input[name=userid]").val("");
          // $(".operation input[name=company]").hidden();
          $(".operation input[name=addtime]").val("");
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'setCaller':
            setCallerlog(data.id);
          break;
        case 'check':
            checklog(data.id);
          break;
      }
    });

    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost("/tZjhmgl/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //验证
    var checklog=function(id){
        //发送验证码
        CoreUtil.sendGet("/tZjhmgl/smdCheck/"+id, null, function (res) {
            //发送验证码失败
            if (res.code != 0) {
                layer.msg(res.msg);
            }
        });
        layer.open({
            type: 1,
            offset: '50px',
            skin: 'layui-layer-molv',
            title: "验证",
            area: ['800px', '400px'],
            shade: 0,
            shadeClose: false,
            content: jQuery("#ediyzm"),
            btn: ['确定', '取消'],
            yes: function (index) {
                var params = {
                    id: id,
                    yzm:  $("#yzm").val()//验证码,
                }
                CoreUtil.sendPut("/tZjhmgl/checkYzm", params, function (res) {
                    //同步数据失败
                    if (res.code != 0) {
                        layer.msg(res.msg);
                    }
                    search();
                });
                layer.close(index);
            }
        });
    }

    //设置主叫
    var setCallerlog=function(id){
        layer.open({
            content: "确定要设置主叫么?",
            yes: function(index, layero){
                layer.close(index); //如果设定了yes回调，需进行手工关闭
                CoreUtil.sendPost("/tZjhmgl/setCaller",id,function (res) {
                    layer.msg(res.msg, {time:1000},function () {
                        search();
                    });
                });
            }
        });
    }

    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/tZjhmgl/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/tZjhmgl/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }
      return false;
    });
  });

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
          zjhm: $("#key").val(),
          userid: $("#user").val(),
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
</script>